<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冷链出租价格</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">冷链出租价格</div>
            
            <!-- 价格计算器 -->
            <div class="price-calculator">
                <el-card header="租赁价格计算器">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="设备类型">
                                <el-select v-model="calculator.equipmentType" @change="updatePrice" placeholder="请选择设备类型">
                                    <el-option label="冷藏车" value="truck"></el-option>
                                    <el-option label="冷藏集装箱" value="container"></el-option>
                                    <el-option label="移动冷库" value="mobile_warehouse"></el-option>
                                    <el-option label="冷藏拖车" value="trailer"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="车型/设备型号">
                                <el-select v-model="calculator.model" @change="updatePrice" placeholder="请选择型号" :disabled="!calculator.equipmentType">
                                    <el-option 
                                        v-for="model in availableModels" 
                                        :key="model.value" 
                                        :label="model.label" 
                                        :value="model.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="租赁时长">
                                <el-input-number 
                                    v-model="calculator.duration" 
                                    @change="updatePrice"
                                    :min="1" 
                                    :max="365" 
                                    label="天数">
                                </el-input-number>
                                <span style="margin-left: 10px;">天</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <div class="price-result" v-if="calculator.totalPrice > 0">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="price-item">
                                    <span class="label">日租价格：</span>
                                    <span class="value">¥{{ calculator.dailyPrice }}</span>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="price-item">
                                    <span class="label">租赁天数：</span>
                                    <span class="value">{{ calculator.duration }}天</span>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="price-item">
                                    <span class="label">总计价格：</span>
                                    <span class="value total-price">¥{{ calculator.totalPrice }}</span>
                                </div>
                            </el-col>
                        </el-row>
                        
                        <div class="discount-info" v-if="calculator.discount > 0">
                            <el-alert 
                                :title="`长期租赁优惠：${calculator.discount}% 折扣已应用`"
                                type="success"
                                :closable="false">
                            </el-alert>
                        </div>
                    </div>
                </el-card>
            </div>

            <!-- 价格表 -->
            <div class="price-table-section">
                <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                    <el-tab-pane label="冷藏车价格" name="truck">
                        <el-table :data="truckPriceData" border>
                            <el-table-column prop="model" label="车型型号" width="150"></el-table-column>
                            <el-table-column prop="capacity" label="载重(吨)" width="100"></el-table-column>
                            <el-table-column prop="dailyPrice" label="日租价(元)" width="120"></el-table-column>
                            <el-table-column prop="weeklyPrice" label="周租价(元)" width="120"></el-table-column>
                            <el-table-column prop="monthlyPrice" label="月租价(元)" width="120"></el-table-column>
                            <el-table-column prop="deposit" label="押金(元)" width="120"></el-table-column>
                            <el-table-column prop="features" label="特色功能"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    
                    <el-tab-pane label="冷藏集装箱价格" name="container">
                        <el-table :data="containerPriceData" border>
                            <el-table-column prop="model" label="设备型号" width="150"></el-table-column>
                            <el-table-column prop="size" label="尺寸" width="120"></el-table-column>
                            <el-table-column prop="dailyPrice" label="日租价(元)" width="120"></el-table-column>
                            <el-table-column prop="weeklyPrice" label="周租价(元)" width="120"></el-table-column>
                            <el-table-column prop="monthlyPrice" label="月租价(元)" width="120"></el-table-column>
                            <el-table-column prop="deposit" label="押金(元)" width="120"></el-table-column>
                            <el-table-column prop="features" label="特色功能"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    
                    <el-tab-pane label="移动冷库价格" name="mobile_warehouse">
                        <el-table :data="warehousePriceData" border>
                            <el-table-column prop="model" label="设备型号" width="150"></el-table-column>
                            <el-table-column prop="capacity" label="容量(立方米)" width="120"></el-table-column>
                            <el-table-column prop="dailyPrice" label="日租价(元)" width="120"></el-table-column>
                            <el-table-column prop="weeklyPrice" label="周租价(元)" width="120"></el-table-column>
                            <el-table-column prop="monthlyPrice" label="月租价(元)" width="120"></el-table-column>
                            <el-table-column prop="deposit" label="押金(元)" width="120"></el-table-column>
                            <el-table-column prop="features" label="特色功能"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <!-- 价格说明 -->
            <div class="price-info">
                <el-card header="价格说明">
                    <ul>
                        <li>所有价格均为含税价格，包含基本保险费用</li>
                        <li>长期租赁优惠：7天以上9.5折，30天以上9折，90天以上8.5折</li>
                        <li>押金在设备归还且无损坏的情况下全额退还</li>
                        <li>燃油费、过路费、停车费等费用需另行承担</li>
                        <li>设备损坏维修费用按实际发生费用收取</li>
                        <li>价格如有变动，以最新公布价格为准</li>
                    </ul>
                </el-card>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'truck',
                    calculator: {
                        equipmentType: '',
                        model: '',
                        duration: 1,
                        dailyPrice: 0,
                        totalPrice: 0,
                        discount: 0
                    },
                    modelOptions: {
                        truck: [
                            { label: '小型冷藏车(3-5吨)', value: 'small_truck', dailyPrice: 400 },
                            { label: '中型冷藏车(5-10吨)', value: 'medium_truck', dailyPrice: 600 },
                            { label: '大型冷藏车(10-15吨)', value: 'large_truck', dailyPrice: 800 },
                            { label: '特大型冷藏车(15吨以上)', value: 'extra_large_truck', dailyPrice: 1200 }
                        ],
                        container: [
                            { label: '20英尺冷藏集装箱', value: 'container_20', dailyPrice: 300 },
                            { label: '40英尺冷藏集装箱', value: 'container_40', dailyPrice: 500 },
                            { label: '40英尺高柜冷藏集装箱', value: 'container_40hc', dailyPrice: 600 }
                        ],
                        mobile_warehouse: [
                            { label: '小型移动冷库(50立方米)', value: 'small_warehouse', dailyPrice: 800 },
                            { label: '中型移动冷库(100立方米)', value: 'medium_warehouse', dailyPrice: 1200 },
                            { label: '大型移动冷库(200立方米)', value: 'large_warehouse', dailyPrice: 2000 }
                        ],
                        trailer: [
                            { label: '标准冷藏拖车', value: 'standard_trailer', dailyPrice: 500 },
                            { label: '双温区冷藏拖车', value: 'dual_temp_trailer', dailyPrice: 700 }
                        ]
                    },
                    truckPriceData: [
                        {
                            model: '小型冷藏车',
                            capacity: '3-5',
                            dailyPrice: 400,
                            weeklyPrice: 2660,
                            monthlyPrice: 10800,
                            deposit: 5000,
                            features: '城市配送，灵活机动'
                        },
                        {
                            model: '中型冷藏车',
                            capacity: '5-10',
                            dailyPrice: 600,
                            weeklyPrice: 3990,
                            monthlyPrice: 16200,
                            deposit: 8000,
                            features: '中距离运输，性价比高'
                        },
                        {
                            model: '大型冷藏车',
                            capacity: '10-15',
                            dailyPrice: 800,
                            weeklyPrice: 5320,
                            monthlyPrice: 21600,
                            deposit: 12000,
                            features: '长途运输，载重量大'
                        },
                        {
                            model: '特大型冷藏车',
                            capacity: '15+',
                            dailyPrice: 1200,
                            weeklyPrice: 7980,
                            monthlyPrice: 32400,
                            deposit: 20000,
                            features: '超大载重，专业运输'
                        }
                    ],
                    containerPriceData: [
                        {
                            model: '20英尺标准',
                            size: '20x8x8.5英尺',
                            dailyPrice: 300,
                            weeklyPrice: 1995,
                            monthlyPrice: 8100,
                            deposit: 3000,
                            features: '海运陆运两用'
                        },
                        {
                            model: '40英尺标准',
                            size: '40x8x8.5英尺',
                            dailyPrice: 500,
                            weeklyPrice: 3325,
                            monthlyPrice: 13500,
                            deposit: 5000,
                            features: '大容量，高效率'
                        },
                        {
                            model: '40英尺高柜',
                            size: '40x8x9.5英尺',
                            dailyPrice: 600,
                            weeklyPrice: 3990,
                            monthlyPrice: 16200,
                            deposit: 6000,
                            features: '超高容量，专业冷链'
                        }
                    ],
                    warehousePriceData: [
                        {
                            model: '小型移动冷库',
                            capacity: 50,
                            dailyPrice: 800,
                            weeklyPrice: 5320,
                            monthlyPrice: 21600,
                            deposit: 10000,
                            features: '移动便捷，安装简单'
                        },
                        {
                            model: '中型移动冷库',
                            capacity: 100,
                            dailyPrice: 1200,
                            weeklyPrice: 7980,
                            monthlyPrice: 32400,
                            deposit: 15000,
                            features: '容量适中，性能稳定'
                        },
                        {
                            model: '大型移动冷库',
                            capacity: 200,
                            dailyPrice: 2000,
                            weeklyPrice: 13300,
                            monthlyPrice: 54000,
                            deposit: 25000,
                            features: '超大容量，专业级设备'
                        }
                    ]
                }
            },
            computed: {
                availableModels() {
                    if (!this.calculator.equipmentType) return [];
                    return this.modelOptions[this.calculator.equipmentType] || [];
                }
            },
            methods: {
                updatePrice() {
                    if (!this.calculator.equipmentType || !this.calculator.model || !this.calculator.duration) {
                        this.calculator.totalPrice = 0;
                        return;
                    }
                    
                    const selectedModel = this.availableModels.find(m => m.value === this.calculator.model);
                    if (!selectedModel) return;
                    
                    this.calculator.dailyPrice = selectedModel.dailyPrice;
                    
                    // 计算折扣
                    let discount = 0;
                    if (this.calculator.duration >= 90) {
                        discount = 15; // 8.5折
                    } else if (this.calculator.duration >= 30) {
                        discount = 10; // 9折
                    } else if (this.calculator.duration >= 7) {
                        discount = 5; // 9.5折
                    }
                    
                    this.calculator.discount = discount;
                    
                    const basePrice = this.calculator.dailyPrice * this.calculator.duration;
                    this.calculator.totalPrice = Math.round(basePrice * (100 - discount) / 100);
                },
                handleTabClick(tab) {
                    this.activeTab = tab.name;
                }
            },
            watch: {
                'calculator.equipmentType'() {
                    this.calculator.model = '';
                    this.calculator.totalPrice = 0;
                }
            }
        });
    </script>

    <style scoped>
        .price-calculator {
            margin-bottom: 30px;
        }
        
        .price-result {
            margin-top: 20px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        
        .price-item {
            text-align: center;
            padding: 10px;
        }
        
        .price-item .label {
            display: block;
            color: #666;
            margin-bottom: 5px;
        }
        
        .price-item .value {
            display: block;
            font-size: 18px;
            font-weight: bold;
            color: #409EFF;
        }
        
        .total-price {
            color: #E6A23C !important;
            font-size: 24px !important;
        }
        
        .discount-info {
            margin-top: 15px;
        }
        
        .price-table-section {
            margin-bottom: 30px;
        }
        
        .price-info ul {
            padding-left: 20px;
        }
        
        .price-info li {
            margin-bottom: 8px;
            line-height: 1.6;
            color: #666;
        }
    </style>
</body>
</html>